<template>
  <div>
<!--    <h2>视频课程第一节</h2>-->
<!--    <web-three :id="4"></web-three>-->
  </div>
</template>

<script>
import {computed, defineComponent, onMounted, ref} from "vue";
import * as THREE from 'three';
import {useRouter, useRoute} from 'vue-router'
import WebThree from "../../components/WebThree.vue";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
export default defineComponent({
  name: "home",
  components: {
    WebThree
  },
  setup() {
    onMounted(() => {
      initData()
    })
    const route = useRoute()
    // const itemData = computed(() => JSON.parse(route.query.itemData))
    const initData = () => {
      let scene = new THREE.Scene()
      let width = window.innerWidth;
      let height = window.innerHeight;
      let camera = new THREE.PerspectiveCamera(45, width/height, 1, 500)

      // 设置坐标轴
      let axes = new THREE.AxesHelper(50)  // 轴长度
      // axes.setSize(0x00ffff,0xffff00,0xff00ff)
      scene.add(axes)

      let geometry = new THREE.BoxGeometry(8,8,8);
      let material = new THREE.MeshLambertMaterial({
        color: 0xff2299
      })
      let cube = new THREE.Mesh(geometry, material);
      cube.rotation.x += 0.8
      cube.rotation.y += 0.8
      scene.add(cube);

      // 设置立方体的位置
      cube.castShadow = true
      cube.position.x = 4
      cube.position.y = 10
      cube.position.z = 20

      // 阴影效果
      let planeGeometry = new THREE.PlaneGeometry(100, 100)
      let planeMaterial = new THREE.MeshLambertMaterial({
        color: 0x888888
      })//新建材质，可以接受并反射场景中的各种光源发射出来的光线
      let plane = new THREE.Mesh(planeGeometry,planeMaterial)
      plane.rotation.x = -0.5*Math.PI;
      plane.position.set(15,0,0)
      plane.receiveShadow = true // 地面接受阴影的对象

      // 为ambient添加光源
      let ambienLight = new THREE.AmbientLight(0xAAAAAA)
      scene.add(ambienLight)

      scene.add(plane)//通过平面几何体对象和lambert材质来新建地面网格对象

      // 设置摄像机位置
      camera.position.x = -30;
      camera.position.y = 45;
      camera.position.z = 35;
      camera.lookAt(scene.position) // 摄像机对准场景的中心点
      // camera.position.z = 5    //摄像机与屏幕的距离

      // 新建聚光灯对象，产生阴影的光源
      let spotLight = new THREE.SpotLight(0xFFFFFF)
      spotLight.position.set(-60, 40, -65)
      spotLight.castShadow = true // 聚光灯产生阴影
      spotLight.shadow.mapSize = new THREE.Vector2(1024,1024)
      spotLight.shadow.camera.far = 130
      spotLight.shadow.camera.near = 40
      scene.add(spotLight)

      // 设置渲染器
      let renderer = new THREE.WebGLRenderer()
      renderer.setSize(width, height)
      renderer.shadowMap.enabled = true  // 实现阴影
      document.body.appendChild(renderer.domElement)

      renderer.render(scene, camera)
      //监听鼠标、键盘事件
      let controls = new OrbitControls(camera, renderer.domElement)//创建控件对象
      controls.addEventListener('change', () => {
        renderer.render(scene, camera)
        cube.rotateY(0.01);
      })
    }
    return {
      // itemData
    }
  }
})
</script>

<style scoped>

</style>